<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head('博客主页')"></head>
<link rel="stylesheet" th:href="@{/lib/css/editormd.css}" />
<link rel="stylesheet" th:href="@{/lib/css/editormd.preview.min.css}" />
<body id="app-container" class="menu-default show-spinner vertical boxed">

    <nav th:replace="_fragments :: nav"></nav>

    <div th:replace="_fragments :: menu(1, 1)"></div>

    <main>
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="mb-2">
                        <h1 th:text="${blogArticle.article.articleTitle}">博客标题</h1>
                        <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                            <ol class="breadcrumb pt-0">
                                <li class="breadcrumb-item">
                                    <a th:text="${blogArticle.account.accountNickname == null ? blogArticle.account.accountEmail : blogArticle.account.accountNickname}"  href="#">作者名</a>
                                </li>
                                <li class="breadcrumb-item">
                                    <a th:text="${blogArticle.type.typeName}" href="#">分类名</a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page" th:text="${#dates.format(blogArticle.article.articleCreateTime,'yyyy-MM-dd HH:mm:ss')}">发布时间</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="separator mb-5"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-12 col-md-12 col-xl-8 col-left">
                    <div class="mb-5">
                            <img class="social-header card-img" th:src="${blogArticle.article.articleFirstPicture}" />
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <ul class="nav nav-tabs card-header-tabs " role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="first-tab" data-toggle="tab" href="#first" role="tab"
                                       aria-controls="first" aria-selected="true">内容</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="second-tab" data-toggle="tab" href="#second" role="tab"
                                       aria-controls="second" aria-selected="false" >评论</a>
                                </li>
                            </ul>
                        </div>
                        <div class="card-body">
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="first" role="tabpanel"
                                     aria-labelledby="first-tab">
                                    <div class="content editormd-preview-theme" id="content">
                                        <textarea style="display:none;" th:text="${blogArticle.article.articleContent}"></textarea>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="second" role="tabpanel" aria-labelledby="second-tab">

                                    <div id="comment">

                                    </div>

                                    <div class="comment-contaiener">

                                        <div class="input-group">
                                            <input id="commentContent" type="text" class="form-control" placeholder="Add a comment">
                                            <div class="input-group-append">
                                                <button id="commentBtn" class="btn btn-secondary" type="button">
                                                    <span class="d-inline-block">评论</span>
                                                    <i class="simple-icon-arrow-right ml-2"></i></button>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-12 col-xl-4 col-right">
                    <div class="card mb-4">
                        <div class="position-absolute card-top-buttons">
                            <button class="btn btn-header-light icon-button">
                                <i class="simple-icon-refresh"></i>
                            </button>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <div class="post-icon mr-3 d-inline-block">
                                    <a id="isLike" href="javascript:;"><i id="heart" style="color: red"></i></a>
                                    <span id="likesCount" th:text="${blogArticle.article.articleLikeCount}"></span><span>喜欢</span></div>
                                <div class="post-icon d-inline-block"><i class="simple-icon-bubble mr-1"></i>
                                    <span id="commentCount" th:text="${blogArticle.article.articleCommentCount}"></span>
                                    <span>条评论</span>
                                </div>
                            </div>
                            <p th:text="${blogArticle.article.articleDescription}" class="mb-3"></p>
                            <p class="text-muted text-small mb-2">标签</p>
                            <p class="mb-3" >
                                <a href="#" th:each="blogLabel:${blogArticle.blogLabels}">
                                    <span class="badge badge-pill badge-outline-theme-2 mb-1" th:text="${blogLabel.labelName}">FRONTEND</span>
                                </a>
                            </p>
                        </div>
                    </div>

                    <div class="card mb-4 d-none d-lg-block">
                        <div class="card-body">
                            <h5 class="card-title"><span>同类推荐</span></h5>
                            <div class="row social-image-row gallery">
                                <div th:each="typeHot:${blogArticle.typeHots}" data-toggle="tooltip" data-placement="top" th:title="${typeHot.articleTitle}"  class="col-6">
                                    <a th:href="${'/blog/details/' + typeHot.articleId}" >
                                        <img class="img-fluid border-radius" th:src="${typeHot.articleFirstPicture}" />
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer th:replace="_fragments :: footer"></footer>

    <th:block th:replace="_fragments :: script" />
    <script th:src="@{/lib/js/editormd.min.js}"></script>
    <script th:src="@{/lib/lib/marked.min.js}"></script>
    <script th:src="@{/lib/lib/prettify.min.js}"></script>
    <script th:src="@{/js/my.details.js}"></script>
</body>
</html>